<!-- Main主框架 -->
<template>
  <div class="main">
    <!-- 标题栏 -->
    <div class="header" v-if="navTemps[navId]!='main_mine'">
      <van-row type="flex" justify="space-between" align="center" style="width: 100%">
        <van-col span="20">
          <van-search v-model="searchTxt" background="#FF8800" placeholder="搜点啥呢" @click="onGoSearch" >
            <span class="header_title" slot="left" style="margin-right: 10px">老中网</span>
          </van-search>
        </van-col>
        <!-- 写文章 -->
        <van-col span="4">
          <van-icon @click="onShowArticleType" name="photograph" size="1.8rem" color="white"/>
        </van-col>
      </van-row>
    </div>
    <div style="height: 74px" v-if="navTemps[navId]!='main_mine'"></div>
    <!-- 标签内容 -->
    <div>
      <keep-alive>
        <component class="comps" :is="navTemps[navId]"></component>
      </keep-alive>
    </div>
    <van-tabbar v-model="navId" active-color="#FF8800" safe-area-inset-bottom>
      <van-tabbar-item icon="wap-home" color="#FF8800">首页</van-tabbar-item>
      <van-tabbar-item icon="comment">社区</van-tabbar-item>
      <van-tabbar-item icon="friends">朋友圈</van-tabbar-item>
<!--      <van-tabbar-item icon="gold-coin">商圈</van-tabbar-item>-->
      <van-tabbar-item icon="manager">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 文章类型选择 -->
    <ArticleType :types="articleTypes" :isShow="articleTypeShow" :onChange="onShowChange" :onChose="onChoseArticleType"></ArticleType>
  </div>
</template>

<script>
// @ is an alias to /src
import Home from '@/views/main/Home.vue'
import Community from '@/views/main/Community.vue'
import Social from '@/views/main/Social.vue'
import Business from '@/views/main/Business.vue'
import Message from '@/views/main/Message.vue'
import Mine from '@/views/main/Mine.vue'

import ArticleType from '@/components/ArticleType.vue'
import Test from '@/views/Test.vue'

export default {
  components: {
    main_home: Home, // 首页
    main_community: Community, // 社区
    main_social: Social, // 社交圈
    main_business: Business, // 商圈
    main_message: Message, // 消息
    main_mine: Mine, // 我的
    ArticleType: ArticleType, // 文章类型
    main_test: Test // 测试
  },
  name: 'Main',
  data () {
    return {
      navId: 0, // 导航默认选中第一个
      // navTemps: ['main_home', 'main_community', 'main_social', 'main_business', 'main_message'],
      navTemps: ['main_home', 'main_community', 'main_social', 'main_mine', 'main_business', 'main_message'],
      // 搜索框
      searchTxt: '',
      // 文章类型选择
      articleTypeShow: false,
      // 文章类型列表
      articleTypes: [
        { id: 1, text: '国内新闻', icon: require('@/assets/icon/news-china.png') },
        { id: 2, text: '老挝新闻', icon: require('@/assets/icon/news-lao.png') },
        { id: 3, text: '老漂故事', icon: require('@/assets/icon/rover.png') },
        { id: 4, text: '爆料吐槽', icon: require('@/assets/icon/disclose.png') },
        { id: 5, text: '同胞互助', icon: require('@/assets/icon/help.png') },
        { id: 99, text: '战疫情', icon: require('@/assets/icon/epidemic.png') }
      ]
    }
  },
  methods: {
    // 搜索
    onGoSearch () {
      this.$router.push({ path: '/search' })
    },
    // 显示文章类型
    onShowArticleType () {
      // 是否登录
      if (!this.$store.getters.GetUserToken) {
        this.$router.push('/login')
        return
      }
      this.articleTypeShow = true
    },
    // 文章类型选择
    onChoseArticleType (idx) {
      this.$router.push({ path: '/edit', query: { flag: 2, title: this.articleTypes[idx].text, type: this.articleTypes[idx].id, id: 0 } })
      this.articleTypeShow = false
    },
    // 文章类型显示/关闭状态切换
    onShowChange (val) {
      this.articleTypeShow = val
    }
  },
  computed: {
  },
  activated () {
    this.articleTypeShow = false
  }
}
</script>

<style type="scss">
  .header {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #FF8800;
    z-index: 101;
  }
  /* 导航图标大小 */
  .van-tabbar-item__icon{
    font-size: 1.6rem !important;
  }
  /* 导航文字大小 */
  .van-tabbar-item__text{
    font-size: 0.75rem !important;
  }
  .comps{
    margin-bottom: 50px;
  }
  .type-content{
    padding-bottom: 50px;
  }
</style>
